    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>楼层制作</title>
        <script src="publicfunction.js"></script>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html {
            height: 100%;
        }

        ul,ol{
            list-style: none;
        }
        ul{
            height: 100%;
        }
        ul li{
            display: block;
            /*width: 100%;*/
            height: 100%;
            color: #ff8413;
            font-size: 50px;
        }
        ol{
            left: 50px;
            position: fixed;
            top: 200px;
        }
        ol li{
            display: block;
            width: 60px;
            height: 25px;
            border: 1px solid #000;
            text-align: center;
            color: aquamarine;
        }
        ul li img{
            width: 100%;
            height: 100%;

        }
    </style>
    <body>
    <ul>
        <li>鞋子 <img src="imgs/鞋子.jpg" alt=""></li>
        <li>袜子<img src="imgs/袜子.jpg" alt=""></li>
        <li>裤子<img src="imgs/裤子.jpg" alt=""></li>
        <li>内衣<img src="imgs/内衣.jpg" alt=""></li>
        <li>外套<img src="imgs/外套.jpg" alt=""></li>
    </ul>
    <ol>
        <li>鞋子层</li>
        <li>袜子层</li>
        <li>裤子层</li>
        <li>内衣层</li>
        <li>外套层</li>
    </ol>
    <script>
        // 需求分析：点击每个层，实现跳转到该张图片
        //难点是，将层的索引值index如何添加到 target=ulLiArr[this.index].offsetTop;这个是大图片顶部到页面顶部0的距离
        //我们移动的是一页页的页面，但是移动要用到缓动，所以里面有缓动函数的内容，以及定时器，要用定时器，先清理定时器
        colorArr=["red","green","yellow","black","blue"];
        console.log(colorArr[0]);

        var ul1=document.getElementsByTagName('ul')[0];
        var ulLiArr=ul1.children;
        var ol1=document.getElementsByTagName('ol')[0];
        var olLiArr=ol1.children;
        var present=0;
        var target=0;
        var timer=null;
        var space=0;

      for (var i=0;i<ulLiArr.length;i++){
          olLiArr[i].index=i;
          ulLiArr[i].style.background=colorArr[i];
          olLiArr[i].style.background=colorArr[i];
            // present=scroll().top;

            olLiArr[i].onclick=function () {
                target=ulLiArr[this.index].offsetTop;
                clearInterval(timer);
                timer=setInterval(function () {
                space=(target-present)/10;
                space=space>0?Math.ceil(space):Math.floor(space);
                present=present+space;
                window.scrollTo(0,present);
                if (Math.abs(target-present)<=Math.abs(space)){
                    window.scrollTo(0,target);
                    clearInterval(timer);
                }
                },18)
            };
            window.onscroll=function () {
                space=scroll().top;
            }
      }
    </script>
    </body>
    </html>